<!--  -->
<template>
  <div class="welcome-container">
    <div class="welcome-main" ref="welcomeMain">
      <div class="tel-login">
        <div class="close" @click="closeWelcome">
          <img src="../../assets/images/close.png" alt="关闭图标" />
        </div>
        <div class="name">百年奥莱</div>
        <div class="reg-btn" @click="toReg">手机号注册</div>
        <login-ways></login-ways>
        <div class="has-account" @click="swipeToIndex(1)">
          <span>已有账号,去登录</span>
          <img src="../../assets/images/down-arrow.png" alt="" />
        </div>
      </div>
      <!-- 账号密码登录 -->

      <div class="account-login">
        <div class="header">
          <div class="close" @click="closeWelcome">
            <img src="../../assets/images/close.png" alt="" />
          </div>
          <div class="no-account" @click="swipeToIndex(0)">
            <img src="../../assets/images/up-arrow.png" alt="" />
            <span>没有账号,去注册</span>
          </div>
        </div>
        <div class="login-form">
          <div class="account">
            <span>账号:</span>
            <input
              type="tel"
              placeholder="请输入手机号"
              v-model="username"
              maxlength="11"
            />
          </div>
          <div class="password">
            <span>密码:</span>
            <input
              type="password"
              placeholder="6-16位字符"
              v-model="password"
            />
          </div>
        </div>
        <div class="forgot-tips">
          <span>忘记密码</span>
          <span>免密登录</span>
        </div>
        <div class="login-btn" @click="toLogin">登录</div>
        <div class="warm-tips">温馨提示: 您可选择免密登录,方便快捷</div>
        <login-ways></login-ways>
      </div>
    </div>
  </div>
</template>

<script>
import loginWays from "@/components/common/login-ways";
import { Toast } from "vant";
import { login } from "@/network/login";
export default {
  data() {
    return {
      //用户名
      username: "",
      //密码
      password: "",
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  methods: {
    //点击滚动到具体的位置
    swipeToIndex(index) {
      this.$refs.welcomeMain.style.transform = `translate(0,${-100 * index}vh)`;
    },
    //关闭欢迎页面
    closeWelcome() {
      this.$router.go(-1);
    },
    //去手机号注册页面
    toReg() {
      console.log("手机号注册");
      this.$router.push("/login/reg");
    },
    //登录
    async toLogin() {
      //校验用户名
      let nameReg = /^1[3|5|7|8|9]\d{9}$/ 
      if (!nameReg.test(this.username)) {
        Toast.fail("请填写正确的手机号");
        return;
      }
      //校验密码规则
      let passReg = /^\w{6,16}$/;
      if (!passReg.test(this.password)) {
        Toast.fail("密码不符合规范");
        return;
      }
      // 验证通过,可以向后端发送登录接口
      const res = await login({
        username: this.username,
        password: this.password,
      });
      if(res.data.code === 0){
        Toast.success('登录成功')
        //将登录信息存到缓存中去
        localStorage.setItem('userInfo',JSON.stringify(res.data.data))
        //去个人中心页
        this.$router.push({name:'Profile'})
      }else{
        Toast.fail(res.data.message) 
        this.username = '';
        this.password = '';
      }
    },
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  components: {
    loginWays,
    [Toast.name]: Toast,
  },
};
</script>
<style scoped>
.welcome-container {
  width: 100vh;
  height: 100vh;
  overflow: hidden;
}
.welcome-main {
  padding: 0 10px;
  font-size: 16px;
  transition: transform 0.3s;
}
.tel-login,
.account-login {
  width: 355px;
  height: 100vh;
}
/* 账号登录 */
.tel-login .close img,
.account-login .close img {
  width: 24px;
  height: 24px;
  margin-top: 10px;
}
.tel-login .name {
  font-size: 40px;
  color: #5eb5f8;
  margin: 100px auto;
  text-align: center;
}
.tel-login .reg-btn {
  height: 44px;
  margin-bottom: 80px;
  text-align: center;
  line-height: 44px;
  color: #fff;
  border-radius: 20px;
  background-color: #5eb5f8;
}

.tel-login .has-account {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/* 账号密码登录 */
.account-login .no-account {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.account-login .no-account span {
  margin-top: 4px;
}
.account-login .login-form {
  margin-top: 100px;
}
.account-login .login-form > div {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #000;
}
.account-login .login-form > div input {
  flex: 1;
  font-size: 16px;
  margin-left: 12px;
  padding: 4px 0;
}
.account-login .forgot-tips {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  color: #5eb5f8;
  font-size: bold;
}
.account-login .warm-tips {
  margin: 10px 0;
  font-size: 14px;
  color: red;
  text-align: center;
}
.account-login .login-btn {
  height: 44px;
  text-align: center;
  line-height: 44px;
  color: #fff;
  border-radius: 20px;
  background-color: #5eb5f8;
  letter-spacing: 10px;
}
.account-login .login-btn .account-login .warm-tips {
  margin: 10px 0 30px;
  font-size: 14px;
  color: #ccc;
  text-align: center;
}
</style>